﻿<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <!--  bootstrap css样式表引入 -->
		<link rel="stylesheet" href="/meilishuo/b/css/bootstrap.css" />
  <style>
	*{
		margin:0;
		padding:0;		
	}
	body{
		background-color:rgb(250,250,250);
	}
	li{
		list-style:none;
		background-color:#fff;
	}
	a{
		text-decoration:none;
		font-family:"微软雅黑";
	}
	#head{
		background-color:#fff;		
	}
	#h_bg{
		width:1200px;
		margin:0 auto;
		/* border:1px solid red; */
		overflow:hidden;
		padding:5px 0;
		background-color:#fff;
	}
	#h_bg a{
		display:inline-block;
		text-align:center;
		height:20px;
		line-height:20px;
		background-color:#fff;
	}
	#h_bg div{
		display:inline-block;
	}
	#shouye{
		height:18px;
		width:18px;
		background:url(img/mlsjl.png) no-repeat;
		margin-bottom:-3px;
	}
	#gouwuche{
		height:18px;
		width:20px;
		background:url(img/mlsjl.png) no-repeat -101px;
		margin-bottom:-3px;
	}
	#dingdan{
		height:18px;
		width:16px;
		background:url(img/mlsjl.png) no-repeat -130px;
		margin-bottom:-3px;
	}
	#xiala{
		height:18px;
		width:16px;
		background:url(img/mlsjl.png) no-repeat -175px;
		margin-bottom:-3px;
	}
	#head a{
		font-size:15px;
		color:rgb(102,102,102);
	}
	#head .nav_zl{
		float:left;
		padding:0 20px;
		border-right:1px dotted gray;
	}
	#head #nav_select{
		float:right;
	}
	.tabmeun{
		width:70px;
		text-align:center;
		background-color:rgb(250,250,250);
		position:absolute;
	}
	#wushangpin{
		width:137px;
		right:694px;
		height:30px;
	}
	.submeun ul{
		display:none;
		z-index:2;
	}
	#h_bg ul li:hover .tabmeun{
		display: block;
	}
	#head_l{
		width:1200px;
		margin:0 auto;
	}
	#head2{
		border-bottom:1px solid #ddd;
	}
	#jdt{
		margin-left:733px;
		margin-top:-35px;
	}
	.jd{
		margin-left:-4px;
	}
	#mqjd{
		position:absolute;
		left:1065px;
	}
	#jdt span{
		position:relative;
	}
	#jdz{
		left:-39px;
	}
	#jdz1{
		left:67px;
	}
	#jdz2{
		left:177px;
	}
	#jdz3{
		left:305px;
	}
	#main{
		width:1200px;
		margin:0 auto;
		margin-top:100px;
		background-color:#fff;
	}
	#main div{
		background-color:#fff;
	}
	#gwc{
		height:68px;
		width:90px;
		background:url(img/gwc.png) no-repeat -190px -127px;
		position:relative;
		left:300px;
		top:100px;
	}
	#main h4{
		margin-left:425px;
		margin-top:30px;
		background-color:#fff;
	}
	#main ul{
		margin-left:425px;
		margin-top:15px;
	}
	p{
		text-align:center;
		margin-top:40px;
		font-size:15px;
		color:#999;
	}
	#jzxz{
		position:absolute;
		left:360px;
		top:140px;
		background-color:#fff;
	}
	#jzxz li{
		float:left;
		margin-right:15px;
		padding-right:15px;
		border-right:1px solid #333;
	}
	#xzz{
		color:#fff;
		background-color:#333;
		padding:5px 20px;
		border-radius:5px;
	}
	#jiezhangbiao{
		padding-top:20px;
		padding-bottom:10px;
		border-bottom:1px solid #ddd;
	}
	#jiezhangbiao input{
		margin-left:35px;
	}
	#jzbqx{
		margin-left:10px;
	}
	#jzbsp{
		left:220px;
	}
	#jzbspxx{
		margin-left:320px;
	}
	#jzbjg,#jzbsl,#jzbxj,#jzbcz{
		margin-left:35px;
	}
	#dpkf{
		padding-top:20px;
		padding-bottom:10px;
		border-bottom:1px solid #ddd;
	}
	#dpkf input{
		margin-left:35px;
	}
	#dianpu{
		margin-left:10px;
	}
	#spxx{
		padding-top:20px;
		padding-bottom:10px;
		border-bottom:1px solid #ddd;
	}
	#tpxz{
		position:relative;
		top:-45px;
		left:36px;
	}
	#spxx img{
		margin-left:100px;
	}
	#spm{
		margin-top:25px;
	}
	#ys,#cc{
		position:relative;
	}
	#ys{
		top:-60px;
	}
	#cc{
		left:777px;
		top:-59px;
	}
	#qishi,#sijiu,#zhekou{
		position:relative;
	}
	#qishi{
		text-decoration:line-through;
		color:#999;
		font-size:12px;
	}
	#sijiu{
		color:red;
		font-weight:bold;
	}
	#zhekou{
		color:red;
	}
	#sljian{
		height:25px;
		width:25px;
		background:url(img/goumaijingling.png) no-repeat -585px -11px;
		border:1px solid #999;
		display:inline-block;
		margin-left:-30px;
		margin-top:30px;
	}
	#sljia{
		height:25px;
		width:25px;
		background:url(img/goumaijingling.png) no-repeat -585px 7px;
		border:1px solid #999;
		display:inline-block;
	}
	#sl{
		height:25px;
		width:45px;
		position: relative;
		top:5px;
		margin-left:-4px;
		margin-right:-4px;
		text-align:center;
		border:1px solid #ddd;
	}
	#sljj{
		position:relative;
		width:103px;
		top:-90px;
		left:945px;
	}
	#jgsj{
		position:relative;
		top:-120px;
		left:1059px;
		color:red;
	}
	#sccz{
		position:relative;
	}
	.row{
		line-height:30px;
		border-bottom:1px solid #999;
	}
	#wpxx{
		margin-top:37px;
	}
	#jzsj{
		margin-top:30px;
		color:red;
	}
	#sccz{
		margin-top:30px;
	}
	#qfk{
		height:35px;
		width:118px;
		padding:0 15px;
		border:0;
		margin-left:-30px;
	}
  </style>
 </head>	
 <body>
	<embed style="width: 100%;" type="text/html" src="/meilishuo/header.html" />
	<div id="head2">
		<div id="head_l">
			<a href="/meilishuo/shou.html"><img src="/meilishuo/img/logo1.png" style="width:190px;position:relative;top:8px;"/></a>
			<div id="jdt">
				<img src="/meilishuo/img/mqjd.png" id="mqjd"/>
				<img src="/meilishuo/img/jindu.png" class="jd"/>
				<img src="/meilishuo/img/jindu.png" class="jd"/>
				<img src="/meilishuo/img/jindu.png" class="jd"/>
				<span id="jdz">购物车</span>
				<span id="jdz1">确认订单</span>
				<span id="jdz2">支付</span>
				<span id="jdz3">完成</span>
			</div>
		</div>
	</div>
	<ul id="jzxz">
		<li><a id="xzz">全部商品(1)</a></li>
		<li><a>优惠(1)</a></li>
		<li><a>库存紧张(0)</a></li>
	</ul>
	<div id="main">
		<div class="row">
			<div class="col-md-1">
				<input type="checkbox"/>
			</div>
			<div class="col-md-1">全选</div>
			<div class="col-md-5" id="jzbsp">商品</div>
			<div class="col-md-1">商品信息</div>
			<div class="col-md-1">单价(元)</div>
			<div class="col-md-1">数量</div>
			<div class="col-md-1">小计(元)</div>
			<div class="col-md-1">操作</div>
		</div>
		<div class="row">
			<div class="col-md-1"><input type="checkbox"/></div>
			<div class="col-md-1">店铺：</div>
			<div class="col-md-2">
				<span>恋上公主</span>
				<img src="img/lianxikefu.gif"/>
				<span>联系客服</span>
			</div>
			<div class="col-md-9"></div>
		</div>
		
		<span v-if=" carArr.length == 0  ">
		    对不起 购物车 空空如也  请先去   <a href="/meilishuo">添加</a>
		</span>
		<span>
		<div  v-for=" (p ,i ) in carArr "   class="row">
			<div class="col-md-1"><input id="wpxx" type="checkbox"/></div>
			<div class="col-md-1">
				<img v-bind:src=" '/meilishuo/' +  p.pimage" style="width:80px;margin-top:6px;"/>
			</div>
			<div class="col-md-5" id="spm">
				{{p.pname}}
			</div>
			<div class="col-md-1">颜色：红色<span>尺寸：S</span></div>
			<div class="col-md-1">
				<span id="qishi"></span><br />
				<span id="sijiu">{{p.price}}</span><br />
				<span id="zhekou">折扣</span>
			</div>
			<div class="col-md-1">
				<button id="sljian"></button>
				<input id="sl" type="text" value="1" v-model="p.num"  readonly="readonly"/>
				<button id="sljia"></button>
			</div>
			<div class="col-md-1" id="jzsj">49.00</div>
			<div class="col-md-1" id="sccz">删除</div>
		</div>
		</span>
		
		
		<div class="row" style="border:none;">
			<div class="col-md-1"><input type="checkbox"/></div>
			<div class="col-md-1">全选&nbsp删除</div>
			<div class="col-md-6">清空失效商品</div>
			<div class="col-md-2">共0款商品，总计：</div>
			<div class="col-md-1" style="font-size:25px;color:red;">0.00</div>
			<div class="col-md-1"><button id="qfk">去付款></button></div>
		</div>
	</div>
	<p><a>美丽说</a>&copy 2016 Meilishuo.com,All Rights Reserved. </p>
	<script type="text/javascript" src="/meilishuo/js/jq.js"></script>
	<script type="text/javascript" src="/meilishuo/js/vue.js"></script>
	<script type="text/javascript">
	
	    // 获取购物车的数据  应该是分页
	    $.get("/meilishuo/car/getCarInfo",function(backData){
	    	app.carArr = backData.data;
	    })
	    
	    var app = new Vue({
	    	el:"#main",
	    	data:{
	    		carArr:[]
	    	},
	    	methods:{}
	    });
		
	</script>
 </body>
</html>
